<template>
  <div>
    <NormalForm pageTitle="批量加好友" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card">
      <div class="right-btn">
        <el-button type="primary" plain size="mini" @click="autowarnDialog = true" v-hasPermi="['admin:adding:addWainingAuto']">自动提醒
        </el-button>
        <el-button type="primary" plain size="mini" @click="importDialog = true" v-has-permi="['admin:adding:batchImport']">导入客户
        </el-button>
        <el-button type="primary" plain size="mini" @click="addCustomer" v-has-permi="['admin:adding:add']">添加客户
        </el-button>
      </div>
      <div style="padding: 0 20px 20px 20px">
        <el-table v-loading="loading" :data="addingList" style="width: 100%;" height="475">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="获客平台" align="center" prop="platformName" />
          <el-table-column label="电话号码" align="center" prop="phone" width="180" />
          <el-table-column label="备注" align="center" prop="remark" :width="220" show-overflow-tooltip />
          <el-table-column label="导入时间" align="center" prop="importTime" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.importTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户标签" align="center" prop="customerTagList" :width="320">
            <template slot-scope="scope">
              <tagGroupShowTable :tagGroup="scope.row.weGroupTagVOS" />
            </template>
          </el-table-column>
          <el-table-column label="添加状态" align="center" prop="addState">
            <template slot-scope="scope">
              <el-tag type="warning" v-if="scope.row.addState == 0">待添加
              </el-tag>
              <el-tag type="success" v-if="scope.row.addState == 1">已添加
              </el-tag>
              <el-tag type="info" v-if="scope.row.addState == 2">待通过</el-tag>
              <el-tag type="info" v-if="scope.row.addState == 3">挂起</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="比对结果" align="center" prop="comparison" />
          <el-table-column label="添加时间" align="center" prop="addTime" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.addTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分配员工" align="center" prop="distributeEmploye" />
          <el-table-column width="150" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <!-- 针对比对结果失败3次，添加状态为“挂起”的客户 -->
              <el-button size="mini" type="text" :disabled="scope.row.addState != 3" v-has-permi="['admin:adding:edit']" @click="rejoin(scope.row)">重进</el-button>
              <el-button size="mini" type="text" :disabled="scope.row.addState == 1" v-has-permi="['admin:adding:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" :disabled="scope.row.addState == 1" v-has-permi="['admin:adding:remove']" @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
    <!-- 自动提醒弹窗 -->
    <AutoWarn :visible.sync="autowarnDialog" v-if="autowarnDialog" />
    <!-- 导入客户弹窗 -->
    <ImportCustomer :visible.sync="importDialog" v-if="importDialog"/>
    <!-- 添加/修改客户弹窗 -->
    <AddCustomer :visible.sync="addDialog" :title="addTitle" :customerInfo="customerInfo" :changeCustomerId="changeCustomerId" v-if="addDialog" />
    <!-- 删除确认弹窗-->
    <el-dialog title="删除确认" :visible.sync="confirmDeleteVisible" class="deleteDialog" width="436px">
      <span class="deleteInfo">确认删除客户信息？</span>
      <div slot="footer">
        <el-button @click="confirmDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDeleteCustomer">确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 客户标签弹窗 -->
    <CustomerTag :visible.sync="tagDialog" :batchAddingId="batchAddingId" v-if="tagDialog" />
    <!-- 打标签弹窗 -->
    <make-label :label="label" :visible.sync="makeLabelVisible"></make-label>
  </div>
</template>

<script>
import { delAdding, listAdding, rejoin } from '@/api/beathAdd'
import AutoWarn from '../component/AutoWarn.vue'
import ImportCustomer from '../component/ImportCustomer.vue'
import AddCustomer from '../component/AddCustomer.vue'
import CustomerTag from '../component/CustomerTag.vue'
import MakeLabel from '@/components/MakeLabel/index.vue'
import { getPlat } from '@/api/sourceManage/sourceManage'

export default {
  name: 'BeathMenual',
  components: {
    AutoWarn,
    ImportCustomer,
    AddCustomer,
    CustomerTag,
    MakeLabel,
  },
  data() {
    return {
      queryForm: {
        platformId: null,
        comparison: null,
        addState: '',
        distributeEmploye: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '获客平台',
          value: '',
          prop: 'platformId',
          type: 'SELECT',
          emunName: 'platformList',
        },
        {
          label: '添加状态',
          value: '',
          prop: 'addState',
          type: 'SELECT',
          emunName: 'addStatusList',
        },
        {
          label: '比对结果',
          value: '',
          prop: 'comparison',
          type: 'SELECT',
          emunName: 'compareList',
        },
        {
          label: '员工名称',
          value: '',
          prop: 'distributeEmploye',
          type: 'INPUT',
          emunName: '',
        },
      ],
      enumOpt: {
        platformList: [],
        addStatusList: [
          { dictValue: '0', dictLabel: '待添加' },
          { dictValue: '1', dictLabel: '已添加' },
          { dictValue: '2', dictLabel: '待通过' },
          { dictValue: '3', dictLabel: '挂起' },
        ],
        compareList: [
          { dictValue: '1', dictLabel: '成功' },
          { dictValue: '2', dictLabel: '失败' },
          { dictValue: '0', dictLabel: '--' },
        ]
      },
      loading: true,
      total: 0,
      addingList: [],
      //自动提醒弹窗
      autowarnDialog: false,
      //导入客户弹窗
      importDialog: false,
      //增加/修改客户弹窗
      addDialog: false,
      //增加/修改客户弹窗表头
      addTitle: '',
      //增加/修改客户问卷
      addForm: {},
      //修改客户时客户信息
      customerInfo: {},
      //修改时客户id
      changeCustomerId: '',
      //删除确认弹窗
      confirmDeleteVisible: false,
      //客户标签弹窗展示与否
      tagDialog: false,
      //客户标签列表
      batchAddingId: '',
      //删除客户
      batchAddingIds: '',
      makeLabelVisible: false,
      label: '',
    }
  },
  created() {
    this.getPlatformList()
    this.handleQuery()
  },
  methods: {
    getPlatformList() {
      getPlat({ scrmBussLineId: localStorage.getItem('InsuranceType') }).then((res) => {
        if (res.code == 200){
          res.rows.forEach(item => {
            this.enumOpt.platformList.push({ dictLabel: item.scrmGetGuestPlatName, dictValue: item.scrmGetGuestPlatId });
          })
          this.addForm.platformId = ''
          this.addForm.customerWay = ''
        }
      })
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      this.loading = true
      this.addingList = []
      listAdding(this.queryForm).then((response) => {
        this.addingList = response.rows
        this.total = response.total
        this.loading = false
        if (this.addingList != [] && this.addingList) {
          this.addingList.forEach((item) => {
            if (item.addState != 1) {
              item.addTime = '-'
            }
            item.customerTagList = item.customerTagList.map((item) => item.name) || []
          })
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleReset() {
      this.queryForm = {
        platformId: null,
        comparison: null,
        addState: '',
        distributeEmploye: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.getListFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = val;
      this.getListFn();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getListFn();
    },
    /** 重进按钮操作 */
    rejoin(row) {
      this.$confirm('是否重进？')
        .then(() => {
          return rejoin({ code: row.batchAddingId })
        })
        .then((res) => {
          if (res.code == 200) {
            this.getListFn()
            this.$message.success('操作成功')
          }
        })
        .finally(() => {})
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.addTitle = '修改客户'
      this.addDialog = true

      let customerInfo = JSON.parse(JSON.stringify(row))
      if (customerInfo.weGroupTagVOS) {
        customerInfo.weGroupTagVOS1 = JSON.parse(
          JSON.stringify(customerInfo.weGroupTagVOS)
        )
        customerInfo.weGroupTagVOS = []
        customerInfo.weGroupTagVOS1.forEach((tagGroup) => {
          tagGroup.tagName.split(',').forEach((tagName) => {
            customerInfo.weGroupTagVOS.push({
              groupName: tagGroup.groupName,
              tagName,
            })
          })
        })
      }
      // console.log('customerInfo',customerInfo);
      this.customerInfo = customerInfo
      this.changeCustomerId = String(row.batchAddingId)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.batchAddingIds = ''
      this.batchAddingIds = row.batchAddingId || []
      this.confirmDeleteVisible = true
    },
    /** 表格查看按钮操作*/
    examine(row) {
      console.log(row)
      this.batchAddingId = row.batchAddingId
      this.tagDialog = true
    },
    /** 增加/修改客户弹窗 */
    addCustomer() {
      this.addTitle = '添加客户'
      this.addDialog = true
      this.changeCustomerId = ''
    },
    /** 删除弹窗操作 */
    handleDeleteCustomer() {
      delAdding({ batchAddingId: this.batchAddingIds }).then((res) => {
        this.confirmDeleteVisible = false
        this.handleQuery()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';

.g-card:first-child {
  margin-bottom: 8px;
}

::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep .el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}

::v-deep.el-tag.el-tag--info {
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

::v-deep.el-tag.el-tag--danger {
  background-color: #fdedee !important;
  border-color: #fadcde !important;
  color: #e74e59 !important;
}
.deleteInfo {
  height: 164px;
  line-height: 164px;
  font-size: 14px;
  display: flex;
  justify-content: center;
}

::v-deep.header-search-select {
  margin-right: 15px;
}

::v-deep.el-button.is-disabled {
  border: 0px;
  color: #c4c0cc !important;
}
</style>
